import * as THREE from "three";
import { useRef, useState } from "react"
import { Canvas, ThreeElements, useFrame } from "react-three-fiber"
import { PerspectiveCamera } from "@react-three/drei" 
// import { useGLTF } from '@react-three/drei'

// function model(props: ThreeElements['group']) {
//   const { nodes, materials } = useGLTF('/scene.gltf')
//   return (
//     <group {...props} dispose={null}>
//       <mesh
//         geometry={nodes.Cube001.geometry}
//         material={materials.Cube001}
//         position={[-1.2, 0, 0]}
//       />
//       <mesh
//         geometry={nodes.Cube002.geometry}
//         material={materials.Cube002}
//         position={[1.2, 0, 0]}
//       />
//     </group>
//   )
// }

function Box(props: ThreeElements['mesh']) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef<THREE.Mesh>(null!)
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (ref.current.rotation.x += delta))
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

function Index() {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <Canvas>
        <PerspectiveCamera makeDefault position={[0, 10, 5]} />
        <ambientLight intensity={Math.PI / 2} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
        <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
        <Box position={[-1.2, 0, 0]} />
        <Box position={[1.2, 0, 0]} />
      </Canvas>
    </div>
  )
}

export default Index
